<template>
  <div class="relative">
    <!-- 数字显示 -->
    <div 
      class="text-3xl font-bold text-white transition-all duration-300"
      :class="{ 
        'animate-pulse text-electric-500': isUpdating,
        'animate-bounce': showNewPolicy,
        'scale-110': isHighlighted
      }"
    >
      {{ displayValue }}
    </div>
    
    <!-- 新政策提醒 -->
    <div 
      v-if="showNewPolicy"
      class="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full animate-ping"
    ></div>
    
    <!-- 增长指示器 -->
    <div 
      v-if="showGrowthIndicator"
      class="absolute -top-1 -right-8 text-xs text-green-400 animate-fade-in-out"
    >
      +{{ growthAmount }}
    </div>
    
    <!-- 新政策弹出提示 -->
    <div 
      v-if="showPolicyNotification"
      class="absolute top-full left-0 mt-2 p-2 bg-electric-500/90 text-white text-xs rounded-lg shadow-lg z-10 animate-slide-up"
      style="min-width: 200px;"
    >
      <div class="flex items-center space-x-2">
        <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
        <span>{{ newPolicyMessage }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnimatedCounter',
  props: {
    targetValue: {
      type: [String, Number],
      required: true
    },
    animationDuration: {
      type: Number,



      default: 2000
    },
    updateInterval: {
      type: Number,
      default: 5000 // 5秒更新一次
    },
    policyType: {
      type: String,
      default: 'general'
    },
    enablePolicyNotifications: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      displayValue: this.targetValue,
      currentValue: this.parseValue(this.targetValue),
      isUpdating: false,
      showNewPolicy: false,
      showGrowthIndicator: false,
      showPolicyNotification: false,
      isHighlighted: false,
      growthAmount: 0,
      newPolicyMessage: '',
      updateTimer: null,
      notificationTimer: null,
      
      // 不同政策类型的增长范围和消息
      policyConfig: {
        'global': {
          growthRange: [1, 8],
          messages: [
            '🌍 新增国际贸易协定',
            '📋 发布跨境政策更新',
            '🔄 政策条款修订',
            '✨ 新增优惠措施'
          ]
        },
        'trade': {
          growthRange: [2, 12],
          messages: [
            '🚢 贸易便利化新措施',
            '📦 通关流程优化',
            '🏪 自贸区政策更新',
            '🌐 数字贸易新规'
          ]
        },
        'tax': {
          growthRange: [3, 15],
          messages: [
            '💰 税收优惠政策发布',
            '📊 税率调整通知',
            '🎯 定向减税措施',
            '💸 出口退税政策'
          ]
        },
        'enterprise': {
          growthRange: [5, 25],
          messages: [
            '🏢 新企业注册',
            '📈 企业扩张计划',
            '🌟 优质企业认证',
            '🤝 企业合作项目'
          ]
        }
      }
    }
  },
  
  mounted() {
    this.startAnimation()
    this.startPeriodicUpdates()
  },
  
  beforeUnmount() {
    this.stopTimers()
  },
  
  watch: {
    targetValue(newVal) {
      this.animateToTarget(newVal)
    }
  },
  
  methods: {
    parseValue(value) {
      if (typeof value === 'string') {
        return parseInt(value.replace(/[^\d]/g, '')) || 0
      }
      return value || 0
    },
    
    formatValue(value) {
      return value.toLocaleString()
    },
    
    startAnimation() {
      this.animateToTarget(this.targetValue)
    },
    
    animateToTarget(targetValue) {
      const target = this.parseValue(targetValue)
      const start = this.currentValue
      const difference = target - start
      const duration = this.animationDuration
      const startTime = Date.now()
      
      const animate = () => {
        const elapsed = Date.now() - startTime
        const progress = Math.min(elapsed / duration, 1)
        
        // 使用缓动函数
        const easeOutCubic = 1 - Math.pow(1 - progress, 3)
        const currentValue = Math.round(start + difference * easeOutCubic)
        
        this.currentValue = currentValue
        this.displayValue = this.formatValue(currentValue)
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        }
      }
      
      animate()
    },
    
    startPeriodicUpdates() {
      this.updateTimer = setInterval(() => {
        this.simulateUpdate()
      }, this.updateInterval)
    },
    
    simulateUpdate() {
      const config = this.policyConfig[this.policyType] || this.policyConfig['global']
      const [minGrowth, maxGrowth] = config.growthRange
      
      // 随机增长量
      this.growthAmount = Math.floor(Math.random() * (maxGrowth - minGrowth + 1)) + minGrowth
      
      // 更新数值
      const newValue = this.currentValue + this.growthAmount
      this.animateToTarget(newValue)
      
      // 显示更新效果
      this.triggerUpdateEffects()
      
      // 显示政策通知
      if (this.enablePolicyNotifications && Math.random() > 0.4) {
        this.showPolicyNotification_(config.messages)
      }
    },
    
    triggerUpdateEffects() {
      // 高亮效果
      this.isHighlighted = true
      setTimeout(() => {
        this.isHighlighted = false
      }, 600)
      
      // 更新指示器
      this.isUpdating = true
      setTimeout(() => {
        this.isUpdating = false
      }, 1000)
      
      // 增长指示器
      this.showGrowthIndicator = true
      setTimeout(() => {
        this.showGrowthIndicator = false
      }, 2000)
      
      // 新政策红点
      this.showNewPolicy = true
      setTimeout(() => {
        this.showNewPolicy = false
      }, 3000)
    },
    
    showPolicyNotification_(messages) {
      // 随机选择消息
      this.newPolicyMessage = messages[Math.floor(Math.random() * messages.length)]
      
      // 显示通知
      this.showPolicyNotification = true
      
      // 3秒后隐藏
      if (this.notificationTimer) {
        clearTimeout(this.notificationTimer)
      }
      
      this.notificationTimer = setTimeout(() => {
        this.showPolicyNotification = false
      }, 3000)
    },
    
    stopTimers() {
      if (this.updateTimer) {
        clearInterval(this.updateTimer)
        this.updateTimer = null
      }
      
      if (this.notificationTimer) {
        clearTimeout(this.notificationTimer)
        this.notificationTimer = null
      }
    }
  }
}
</script>

<style scoped>
@keyframes fade-in-out {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes slide-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-out {
  animation: fade-in-out 2s ease-in-out;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* 数字跳动效果 */
.animate-bounce {
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 脉冲发光效果 */
.animate-pulse {
  animation: pulse-glow 1s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    text-shadow: 0 0 5px #00f5ff, 0 0 10px #00f5ff, 0 0 15px #00f5ff;
  }
  to {
    text-shadow: 0 0 10px #00f5ff, 0 0 20px #00f5ff, 0 0 30px #00f5ff;
  }
}

/* 缩放高亮效果 */
.scale-110 {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}
</style> 